// 首页顶栏
import React from 'react';
import { observer } from 'mobx-react-lite';
import { Link } from 'react-router-dom';
import { Layout, Button } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons';
import { layoutService } from '~/services/layout';
import './index.local.sass';

const { Header } = Layout;

export const HomeHeader = observer(() => {
  const { state, setCollapse } = layoutService;

  return (
    <Header className="flex items-center justify-between bg-white p-0">
      <span
        className="trigger ml-4"
        onClick={() => setCollapse(!state.collapsed)}
      >
        {state.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </span>
      <div className="flex mr-4">
        <Link to='/login'><Button>Return to login</Button></Link>
      </div>
    </Header>
  );
});
